<template>
  <div class="distribute">
    <div id="container">
      <!-- 上部分 -->
      <div class="location" @click="choose">{{ cityName }}</div>
      <el-input
        v-model="searchValue"
        class="w-50 m-2"
        placeholder="请输入搜索的内容"
        :prefix-icon="Search"
        @keydown.enter="lookFor"
      />
      <div class="sum">
        总计 <strong>{{ count }}</strong
        >家
      </div>
      <strong class="add" @click="add"> + </strong>
    </div>
    <!-- 新增数据弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="哈哈哈哈哈哈我也不知道新增啥">
      <el-form>
        <el-form-item label="城市" label-width="140px">
          <el-input v-model="addCity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" label-width="140px">
          <el-input type="num" v-model="addCount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="星级" label-width="140px">
          <el-input type="num" v-model="addStar" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 城市选择抽屉 -->
    <el-drawer v-model="drawer" title="城市选择">
      <div
        class="cities"
        v-for="item in cityInfo"
        :key="item.ccity"
        @click="changeCity(item.ccity, item.goodsSale)"
      >
        {{ item.ccity }}
        <div class="goodsStar">
          <span>大众点评</span>&nbsp;&nbsp;&nbsp;&nbsp;{{ item.goodsStar }}
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";
import { ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import chooseCity from "../../../mock/distribute";
export default {
  setup() {
    let map = shallowRef(null);
    const initMap = () => {
      AMapLoader.load({
        key: "7aad3fcd663e54c60123488244c79496", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 18, //初始化地图级别
            center: [120.264425, 30.306636], //初始化地图中心点位置
          });
          // 点标记
          const marker1 = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: new AMap.LngLat(120.264425, 30.305726),
            title: "北京",
          });
          const marker2 = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: new AMap.LngLat(120.263275, 30.308122),
            title: "南京",
          });
          let markerList = [marker1, marker2];
          // 将创建的点标记添加到已有的地图实例：
          map.add(markerList);
          // 创建纯文本标记
          var text = new AMap.Text({
            text: "把一杯茶开遍千峰",
            anchor: "center", // 设置文本标记锚点
            draggable: true,
            cursor: "pointer",
            angle: 10,
            style: {
              padding: ".75rem 1.25rem",
              "margin-bottom": "1rem",
              "border-radius": ".25rem",
              "background-color": "white",
              width: "20rem",
              "border-width": 0,
              "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
              "text-align": "center",
              "font-size": "30px",
              color: "blue",
            },
            position: [120.263525, 30.306236],
          });

          text.setMap(map);
        })
        .catch((e) => {
          console.log(e);
        });
    };
    onMounted(() => {
      //DOM初始化完成进行地图初始化
      initMap();
    });

    // 城市选择
    const count = ref(2);
    const cityName = ref("杭州");
    const drawer = ref(false);
    const cityInfo = ref([]);
    const choose = () => {
      console.log("城市选择hhhhh");
      drawer.value = true;
      chooseCity.getDate().then((res) => {
        cityInfo.value = res.data;
      });
    };
    const changeCity = (city, num) => {
      count.value = num;
      cityName.value = city;
      drawer.value = false;
    };

    // 新增 就增加在城市选择数据库里面 不写别的数据库了
    const dialogFormVisible = ref(false);
    const addCity = ref("");
    const addCount = ref(0);
    const addStar = ref(0);
    const add = () => {
      dialogFormVisible.value = true;
    };
    // 确认新增
    const confirm = () => {
      if (addCity.value !== "" && addCount.value !== 0 && addStar.value !== 0) {
        chooseCity
          .addDate({
            ccity: addCity.value,
            goodsSale: addCount.value,
            goodsStar: addStar.value,
          })
          .then((res) => {
            cityInfo.value = res.data;
          });
        addCity.value = "";
        addCount.value = 0;
        addStar.value = 0;
        dialogFormVisible.value = false;
      } else {
        tips("新增内容必须完整才能开新店呢", "提示");
      }
    };

    // 搜索
    const searchValue = ref("");
    const lookFor = () => {
      if (searchValue.value) {
        chooseCity.searchData(searchValue.value).then((res) => {
          console.log(res);
          if (res.length === 1) {
            const tip =
              " 城市: " +
              res[0].ccity +
              " 数量: " +
              res[0].goodsSale +
              " 星级: " +
              res[0].goodsStar +
              "";
            tips(tip, "找到你啦");
            cityName.value = res[0].ccity;
            count.value = res[0].goodsSale;
          } else {
            tips("这里不是一杯茶占领的江山", "哎鸭");
          }
        });
      } else {
        tips("所搜内容不能为空", "提示");
      }
    };

    // 封装一个提示框
    const tips = (tip, title) => {
      ElMessageBox.alert(tip, title, {
        confirmButtonText: "OK",
        customStyle: "width:800px;height:180px;background-color:#dbe2ca",
      });
    };

    return {
      map, // 地图
      initMap, // 地图初始化方法
      searchValue, // 选择框
      Search, // 选择框组件
      choose, // 选择城市方法
      drawer, // 控制抽屉显示
      cityInfo, // 城市信息循环数组
      changeCity, // 改变城市方法
      cityName, // 首页城市名称
      count, // 首页店铺数量
      add, // 新增数据方法
      dialogFormVisible, // 控制新增弹出框
      addCity, // 新增城市
      addCount, // 新增数量
      addStar, // 新增星级
      confirm, // 确认新增
      lookFor, // 搜索事件
      tips, // 提示框
    };
  },
};
</script>

<style lang="less" scoped>
.distribute {
  width: 100%;
  height: 100%;
  background-color: #dbe2ca;
  display: flex;
  justify-content: center;
  align-items: center;
}
#container {
  padding: 0px;
  margin: 0px;
  width: 98%;
  height: 95%;
  position: relative;
  border: 4px solid #d9e2c8;
  .location {
    position: absolute;
    top: 13px;
    left: 20px;
    width: 86px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #d9e2c8;
    border-radius: 5px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    z-index: 10;
  }
  .el-input {
    width: 267px;
    height: 40px;
    position: absolute;
    top: 13px;
    left: 126px;
    z-index: 10;
  }
  .sum {
    position: absolute;
    top: 13px;
    right: 106px;
    width: 111px;
    height: 40px;
    background-color: #dbe2ca;
    border: 1px dashed #333;
    z-index: 10;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
  }
  .add {
    display: block;
    width: 40px;
    height: 40px;
    background-color: #dbe2ca;
    border: 1px dashed #333;
    position: absolute;
    top: 13px;
    right: 36px;
    z-index: 10;
    line-height: 40px;
    text-align: center;
    font-size: 26px;
    font-weight: 500;
    cursor: pointer;
  }
}
.cities {
  height: 60px;
  border: 1px solid #dbe2ca;
  border-radius: 6px;
  background-color: #f2f2f2;
  font-size: 24px;
  line-height: 60px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  /deep/.goodsStar {
    color: red;
  }
}
/deep/.el-input__inner {
  width: 267px;
  height: 40px;
  background: #ffffff;
  border-radius: 10px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #555555;
}
/deep/.el-icon svg {
  width: 24px;
  height: 26px;
  opacity: 0.6;
  font-size: 24px;
  color: #333;
}

// 新增框
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
/deep/.el-message-box__message p {
  color: red;
  font-size: 26px;
}
</style>
